/* eslint-disable react-hooks/exhaustive-deps */

import Layout from './Layout'
import Search from './Search'
import { Row, Col, Typography } from 'antd'
import ProductItem from './ProductItem'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'
import { get_products } from '../../store/actions/products'

const { Title } = Typography

function Home() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(get_products({
      sortBy: "sold",
      limit: 4,
      order: "desc"
    }))
    dispatch(get_products({
      sortBy: "createdAt",
      limit: 4,
      order: "desc"
    }))
  }, [])
  const { sold, createdAt } = useSelector(state => state.products)
  return (
    <Layout title="图书严选首页" subTitle="开始购物之旅">
      <Search></Search>
      <Title level={5} style={{ marginTop: 10 }}>最新上架</Title>
      <Row gutter={[16, 16]}>
        {
          createdAt.map(product => (
            <Col span="6" key={product._id}>
              <ProductItem product={product} imgStyle={{width:213.88,hegiht:213.88,margin:"10px auto 0"}} />
            </Col>
          ))
        }
      </Row>
      <Title level={5} style={{ marginTop: 10 }}>最受欢迎</Title>
      <Row gutter={[16, 16]}>
        {
          sold.map(product => (
            <Col span="6" key={product._id}>
              <ProductItem product={product} imgStyle={{width:213.88,hegiht:213.88,margin:"10px auto 0"}}/>
            </Col>
          ))
        }
      </Row>
    </Layout>
  )
}



export default Home